<template>
  <div class="rollingComp" ref="rollingComp" :style="commpStyle">
    <div class="rollingHeader" ref="rollingHeader">
      <el-row>
        <el-col :span="header.width?header.width:24/rollingHeader.length" v-for="(header,index) in rollingHeader" style="padding: 0px 10px;text-align: left;"
                :key="'rollingHeader_'+index">{{ header.label }}
        </el-col>
      </el-row>
    </div>
    <div class="rollingBody" ref="rollingBody">
      <el-row v-for="(item, index) in rollingList" :key="'rollingBody_'+index" class="rowBody">
        <el-col :span="header.width?header.width:24/rollingHeader.length" v-for="(header, ind) in rollingHeader" style="padding: 0px 10px;text-align: left;"
                :key="'itemCol_'+ ind" class="rolBody">
          <!-- {{ getRollingValue(header, item) }} -->
          <component v-if="getSubComponent(header.render)"
                     :is="getSubComponent(header.render)"
                     v-bind="getSubComponentParams(header.render, item[header.prop])"
                     v-on="getSubComponentEvent(header.render)"
                     v-model="item[header.prop]">
            <span v-if="getSubComponentHtml(header.render)" v-html="getSubComponentHtml(header.render)"></span>
          </component>
          <span v-else v-html="getRollingValue(header, item)"></span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import baseComp from "./baseComp";

export default {
  name: 'rollingComp',
  extends: baseComp,
  model: {
    prop: "value",
    event: "rollingCompChange",
  },
  props: {
    value: {
      type: [Object, String, Array],
    },
    //是否自动滚动
    autoRolling: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    //滚动方向，top，bottom==>向上，向下
    rollingDirection: {
      type: String,
      default: 'bottom'
    },
    //滚动间隔时间，单位是秒，默认1秒钟滚动一次
    rollingInterval: {
      type: Number,
      default: () => {
        return 1000
      }
    },
    rollingHeader: {
      type: Array,
      default: () => {
        //{key:val.prop, prop:val.prop, label:val.label, formatter: val.formatter, width: val.width, visible: true}
        return []
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.rollingList = val;
        }
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      rollingList: [],
      timer: ''
    }
  },
  mounted() {
    this.loadTheme(this.$options.name);
  },
  created() {
    this.startRolling();
  },
  destroyed() {
    this.stopRolling();
  },
  methods: {
    /**
     * 停止滚动
     */
    stopRolling() {
      window.clearInterval(this.timer);
    },
    /**
     *
     * @param data 添加数据内容
     */
    insert(data) {
      let rollingCompElement = this.$refs.rollingComp;
      let rollingHeaderElement = this.$refs.rollingHeader;
      let rollingBodyElement = this.$refs.rollingBody;
      //组件高度
      let rollingCompHeight = rollingCompElement.offsetHeight;
      //头部高度
      let rollingHeaderHeight = rollingHeaderElement.offsetHeight;
      // 获取元素的高度
      let rollingBodyHeight = rollingBodyElement.offsetHeight;
      if (this.rollingDirection == 'top') {
        if (rollingHeaderHeight + rollingBodyHeight > rollingCompHeight) {
          //删除第一个
          this.rollingList.shift();
          //追加新数据
          this.rollingList.push(data);
        } else {
          this.rollingList.push(data);
        }
      } else {
        if (rollingHeaderHeight + rollingBodyHeight > rollingCompHeight) {
          //删除最后一个
          this.rollingList.pop();
          //插入新数据到第一个位置
          this.rollingList.unshift(data);
        } else {
          //插入新数据到第一个位置
          this.rollingList.unshift(data);
        }
      }

    },
    /**
     * 开始滚动
     */
    startRolling() {
      //setInterval
      if (this.autoRolling) {
        this.timer = window.setInterval(() => {
          if (this.rollingDirection == 'top') {
            //删除第一个
            let first = this.rollingList.shift();
            //追加新数据
            this.rollingList.push(first);
          }
          {
            //删除最后一个
            let last = this.rollingList.pop();
            //将数据据插入第一个
            this.rollingList.unshift(last);
          }
        }, this.rollingInterval)
      }
    },
    /**
     * 根据表头配置的定义以及formartter对数据进行转换。
     * @param header 表头定义
     * @param item 数据项
     */
    getRollingValue(header, item) {
      if (header.formatter) {
        if (typeof header.formatter == 'function') {
          return header.formatter(item[header.prop]);
        } else {
          let headerFunc = eval(header.formatter);
          return headerFunc(item[header.prop]);
        }
      }
      return item[header.prop];
    },
    /**
     * 获取传入进来的组件名
     * @param rowIndex 行索引  this.toolbar.custom.render
     * @param colIndex 列索引
     */
    getSubComponent(component) {
      return this.getComponent(component);
    },
    /**
     * 获取组件渲染参数
     * @param dataList 数据集
     * @param rowIndex 行索引
     * @param colIndex 列索引
     * @param tableHeader 当前列表头
     * @param row 当前行数据
     * @returns {string|*}
     */
    getSubComponentParams(component, row) {
      let vbParams = this.getComponentParams(component);
      // props传参
      vbParams.inData = row || {};
      return vbParams;
    },

    /**
     * 获取组件事件
     */
    getSubComponentEvent(component) {
      return this.getComponentEvent(component);
    },
    /**
     * 获取组件html
     */
    getSubComponentHtml(component) {
      return this.getComponentHtml(component);
    },
  }
}
</script>
<style less="lang" scoped>
/deep/ .rolBody {
  animation: slide-in 0.5s ease forwards;
}

@keyframes slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
